<template>
	<view>
		<view class="box_item">
			<view class="box_group">
				<view class="box_cell">
					<view class="title">设备ID</view>
					<view class="box">
						<input type="text" v-model="deviceConfig.deviceId" placeholder="请输入节点ID">

					</view>
				</view>
				<view class="box_cell">
					<view class="title">备注</view>
					<view class="box">
						<input type="text" v-model="deviceConfig.remark" maxlength="15" placeholder="请输入备注">
					</view>
				</view>
				<view class="box_cell">
					<view class="title">单条上行</view>
					<view class="box">
						<input type="number" v-model="deviceConfig.upBandwidth" placeholder="请输入单条上行">
					</view>
				</view>
				<view class="box_cell">
					<view class="title">线路数量</view>
					<view class="box">
						<input type="number" v-model="deviceConfig.lineNumber" placeholder="请输入线路数量">
						<text class="total">总:{{deviceConfig.upBandwidth*deviceConfig.lineNumber | myFilter}}</text>
					</view>
				</view>
				<view class="box_cell">
					<view class="title">省份/城市</view>
					<view class="box">
						<pca-picker-cc v-on:getAddressResultObj="getAddressResultObj" :addressList.sync="addressList">
							<input type="text" v-if="deviceConfig.province==''" disabled placeholder="请选择省份/城市">
							<input type="text" v-else :value="`${deviceConfig.province} ${deviceConfig.city}`" disabled
								placeholder="请选择省份/城市">
						</pca-picker-cc>
						<text class="cell-more yticon icon-you"></text>
					</view>
				</view>
				<view class="box_cell">
					<view class="title">运营商</view>
					<view class="box" @click="showAction('请选择运营商','isp')">
						<input type="text" v-model="deviceConfig.isp" disabled placeholder="请选择运营商">
						<text class="cell-more yticon icon-you"></text>
					</view>
				</view>
				<view class="box_cell">
					<view class="title">DNS</view>
					<view class="box">
						<input type="text" v-model="deviceConfig.dns" placeholder="填写DNS有助于跑量">
					</view>
				</view>
				<view class="box_cell">
					<view class="title">上网方式</view>
					<view class="box" @click="showAction('请选择上网方式','diallingType')">
						<input type="text" v-model="diallingNmae" disabled placeholder="请选择上网方式">
						<text class="cell-more yticon icon-you"></text>
					</view>
				</view>
				<view class="box_cell">
					<view class="title">公网/内网</view>
					<view class="box">
						<view :class="deviceConfig.natType==item.code?'active boxItem':'boxItem' "
							@click="changeradio('natType',item.code)" v-for="(item,index) in configList.natType"
							:key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- <view class="box_cell">
					<view class="title">机房类型</view>
					<view class="box">
						<view class="boxItem active">
							IDC机房
						</view>
						<view class="boxItem">
							城域网机房
						</view>
						<view class="boxItem">
							托管机房
						</view>
					</view>
				</view> -->
				<!-- <view class="box_cell">
					<view class="title">UPS</view>
					<view class="box">
						<view class="box">
							<view class="boxItem active" v-for="(item,index) in configList.ipProtocol" :key="index">
								{{item.name}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="box_cell">
					<view class="title">IP协议栈</view>
					<view class="box">
						<view :class="deviceConfig.ipProtocol==item.code?'active boxItem':'boxItem' "
							@click="changeradio('ipProtocol',item.code)" v-for="(item,index) in configList.ipProtocol"
							:key="index">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="btn">
					扫码绑定
				</view>
				<view class="btn" @click="bind">
					立即绑定
				</view>
			</view>
		</view>

		<u-action-sheet :actions="list" :title="title" :show="show" @close="closeAction"
			@select="selectAction"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				list: [],
				show: false,
				configList: [],
				activeNmae: '',
				deviceConfig: {
					deviceId: '',
					remark: '',
					upBandwidth: '',
					lineNumber: '',
					city: '',
					province: '',
					isp: '',
					diallingType: '',
					natType: '',
					ipProtocol: '',
					dns: '',
				},
				deviceInfo: {
					deviceId: '请输入节点ID',
					remark: '请输入备注',
					upBandwidth: '请输入单条上行',
					lineNumber: '请输入线路数量',
					province: '请选择省份/城市',
					city: '请选择省份/城市',
					isp: '请选择运营商',
					diallingType: '请选择上网方式',
					natType: '请选择公网/内网',
					ipProtocol: '请选择IP协议栈',
				},
				diallingNmae: '',
				addressList: []
			}
		},
		onLoad() {
			this.getConfig()
		},
		filters: {
			myFilter(num) {
				let str = num == 0 ? '0.00 Gbps' : num.toFixed(2) + 'Gbps';
				return str
			},

		},
		methods: {
			getConfig() {
				this.$fun.ajax.post('pai/getSubmit').then(res => {
					this.configList = res.data
				})
			},
			// 获取地址
			getAddressResultObj(res) {
				this.deviceConfig.province = res.province.name
				this.deviceConfig.city = res.city.name
			},
			// 打开
			showAction(title, type) {
				this.title = title
				this.activeNmae = type
				this.list = this.configList[type]
				this.show = true
			},
			// 选择
			selectAction(e) {
				this.deviceConfig[this.activeNmae] = e.code
				if (this.activeNmae == 'diallingType') {
					this.diallingNmae = e.name
				}
				this.activeNmae = ''
				console.log(e.code)
			},
			// 关闭
			closeAction() {
				this.show = false
			},
			changeradio(str, code) {
				this.deviceConfig[str] = code
				console.log(this.deviceConfig[str])
				console.log(str)
			},
			// 绑定设备
			bind() {
				let msg = ''
				for (var key in this.deviceConfig) {
					if (this.deviceConfig[key] == '' && key != 'dns') {
						msg =this.deviceInfo[key]
						return
					}
				}
				// 数据没写完
				if(msg){
					 this.$fun.msg(msg)
					 return
				}
				this.$fun.ajax.post('pai/submit',this.deviceConfig).then(res=>{
					console.log((res))
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEEEEE;

		.box_item {
			margin-top: 24rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;

			.box_group {
				background: #FFFFFF;
				padding: 0 27rpx;
				border-radius: 12rpx;

				.box_cell {
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: space-between;
					height: 102rpx;
					font-size: 28rpx;

					.title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.title::after {
						content: '*';
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #D52020;
					}

					picker {
						.box {
							width: 100%;

							.cell-more {
								transform: rotate(90deg);
							}

							input {
								width: 350rpx;
								font-size: 28rpx;
							}

							.boxItem {
								width: 30%;
								color: #666666;
								display: flex;
								align-items: center;
								font-size: 24rpx;
							}

							.active::before {
								content: '';
								display: inline-block;
								width: 24rpx;
								height: 24rpx;
								background: #FE5102 !important;
								border: 1px solid #FE5102 !important;
								border-radius: 50%;
								margin-right: 10rpx;
							}

							.boxItem::before {
								content: '';
								display: inline-block;
								width: 24rpx;
								height: 24rpx;
								border: 1px solid #999999;
								border-radius: 50%;
								margin-right: 5rpx;
							}
						}
					}

					.box {
						display: flex;
						width: calc(100% - 120px);

						.cell-more {
							transform: rotate(90deg);
						}

						.total {
							font-size: 26rpx;
							display: inline-block;
							width: 300rpx;
						}

						input {
							width: 350rpx;
							font-size: 28rpx;
						}

						.boxItem {
							width: 30%;
							color: #666666;
							display: flex;
							align-items: center;
							font-size: 24rpx;
						}

						.active::before {
							content: '';
							display: inline-block;
							width: 24rpx;
							height: 24rpx;
							background: #FE5102 !important;
							border: 1px solid #FE5102 !important;
							border-radius: 50%;
							margin-right: 10rpx;
						}

						.boxItem::before {
							content: '';
							display: inline-block;
							width: 24rpx;
							height: 24rpx;
							border: 1px solid #999999;
							border-radius: 50%;
							margin-right: 5rpx;
						}
					}
				}
			}

			.btns {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
			
				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 336rpx;
					height: 98rpx;
					background: rgb(240, 223, 215);
					border-radius: 12rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FE5102;
				}
			
				.btn:nth-child(2) {
					background: #FE5102;
					color: #FFFFFF;
				}
			}
		}
	}
</style>